<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div>
			<button>使用sessionStorage</button>
			<input id="input" placeholder="请输入用户名" />
			<button id="save">存储用户名</button>
			<button id="get">获取用户名</button>
			<button id="remove">删除用户名</button>
			<button id="clear">清除所有用户名</button>
		</div>
	</body>

	<script>
		/**
		 * 本地存储特性
		 * 1、 数据存储在用户浏览器中
		 * 2、设置、读取方便，甚至页面刷新也不丢失数据
		 * 3、容量较大，sessionStorage 约5M，localStorage容量约20M
		 * 4、只能存储字符串，可以将对象JSON.stringify()编码后再存储
		 * */
		/**
		 * sessionStorage 
		 * 生命周期是浏览器的生命周期，浏览器关闭即消失
		 * 在同一个窗口（页面）下数据可以共享
		 * 以键值对的形式存储使用
		 * window.sessionStorage中的 window 可以省略
		 * */
		var input = document.querySelector("#input");
		var save = document.querySelector("#save");
		var get = document.querySelector("#get");
		var remove = document.querySelector("#remove");
		var clear = document.querySelector("#clear");

		save.addEventListener("click", () => {
			var name = input.value;
			//window 可以省略
			window.sessionStorage.setItem("username", name);
		})
		get.addEventListener("click", () => {
			// 获取用户名
			console.log("sessionStorage 用户名：", window.sessionStorage.getItem("username"));
		})
		remove.addEventListener("click", () => {
			sessionStorage.removeItem("username");
		})
		clear.addEventListener("click", () => {
			sessionStorage.clear();
		})
	</script>
</html>
